<template>
  <div style="margin-left: auto; margin-right: auto;">
    <el-carousel style="width:1300px; margin-left: auto; margin-right: auto;" type="card">
      <el-carousel-item style="height: 300px; width: 745px;"><img src="/image/banner_1.jpg" style="width:100%;height: 100%;" width="745" height="300"></el-carousel-item>
      <el-carousel-item><img src="banner_2.jpg" style="width:100%;height: 100%;" width="745" height="300"></el-carousel-item>
      <el-carousel-item><img src="banner_3.jpg" style="width:100%;height: 100%;" width="745" height="300"></el-carousel-item>
      <el-carousel-item><img src="banner_4.jpg" style="width:100%;height: 100%;" width="745" height="300"></el-carousel-item>
    </el-carousel>
  </div>

  <div style="width: 1300px; margin-left: auto; margin-right: auto">
    <h3 style="text-align: left">最新上架</h3>
    <el-row :gutter="10">
      <el-col :span="4"><img src="gutter-1.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-2.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-3.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-4.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-5.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-11.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
    </el-row>
  </div>
  <br/>
  <div style="width: 1300px; margin-left: auto; margin-right: auto">
    <h3 style="text-align: left">新声力量集结</h3>
    <el-row :gutter="10">
      <el-col :span="4"><img src="gutter-3.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-2.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-3.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-11.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-10.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-6.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
    </el-row>
  </div>

  <div style="width: 1300px; margin-left: auto; margin-right: auto">
    <h3 style="text-align: left">内地专辑推荐</h3>
    <el-row :gutter="10">
      <el-col :span="4"><img src="gutter-1.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-11.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-6.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-8.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-11.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-1.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
    </el-row>
  </div>

  <div style="width: 1300px; margin-left: auto; margin-right: auto">
    <h3 style="text-align: left">韩国专辑推荐</h3>
    <el-row :gutter="10">
      <el-col :span="4"><img src="gutter-8.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-9.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-11.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col><br/>
      <el-col :span="4"><img src="gutter-5.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-9.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-7.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
    </el-row>
  </div><br/>
  <div style="width: 1300px; margin-left: auto; margin-right: auto">
    <h3 style="text-align: left">影视剧OST推荐</h3>
    <el-row :gutter="10">
      <el-col :span="4"><img src="gutter-6.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-4.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-11.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-4.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-5.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="4"><img src="gutter-6.jpg" style="width:100%;">
        <table width="210">
          <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
          <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
          <tr>
            <td style="text-align: left">¥ 4</td>
            <td style="text-align: right"><el-button>立刻购买</el-button></td>
          </tr>
        </table>
      </el-col>
    </el-row>
  </div><br/>
</template>

<script setup>

</script>

<style scoped>
a {color: #828282; text-line-through-color:white;}
a:visited {color: #9C9C9C;}
a:hover {color: green;}
table {
  margin-left: auto;
  margin-right: auto;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  /*margin: 0 auto;*/
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  width: 1500px;
  height: 300px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>